<template>
    <view class="container">
		<image :src="imageUrl + '/yunzhanguan/yunzhanguanimage-49603.png'" class="beijing"></image>
		<view class="logo-container">
			<view class="vertical-container">
			      <text class="vertical-item">公益·教育</text>
			</view>
			<view class="image-container">
				<view class="image-item-1" hover-class="hover-image-style" @click="navigateToDetail('image1')">
					<image :src="imageUrl + '/gongyijiaoyu/gongyijiaoyuGroup-1231.png'" :class="imageClass" class="image-item"></image>
				</view>
				<view class="image-item-2" @click="navigateToDetail('image2')">
					<image :src="imageUrl + '/gongyijiaoyu/gongyijiaoyuGroup-1232.png'" :class="imageClass2" class="image-item"></image>
				</view>
				<view class="image-item-3" @click="navigateToDetail('image3')">
					<image :src="imageUrl + '/gongyijiaoyu/gongyijiaoyuGroup-1233.png'" :class="imageClass" class="image-item"></image>
				</view>
				<view class="chenguo" @click="tizozhuan">
					
				</view>
				<view class="image-item-4" @click="navigateToDetail('image4')">
					<image :src="imageUrl + '/gongyijiaoyu/gongyijiaoyuGroup-1234.png'" :class="imageClass2" class="image-item"></image>
				</view>
			</view>
			<view class="dibucontainer">
				<view class="daohang">
					<!-- <image :src="imageUrl + '/xiaoniao.png'" mode="aspectFill" style="width: 160.31rpx; height: 159.51rpx;" @click="tzdl"></image> -->
				</view>
				<view class="jianto">
					<image :src="imageUrl + '/images/imagesGroup-788.png'" mode="aspectFill" style="width: 40.01rpx; height: 40.01rpx;" :class="{ 'arrow-fade': true }"></image>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				imageUrl: this.$imageUrl,
                showImage: false,
				showImage2: false,
				touchStartX: 0,
				touchStartY: 0,
				startY: 0,
				isTouching: false,
            };
        },
		methods: {
			
			tizozhuan() {
				wx.redirectTo({
					url: '/pages-public-welfare/pages-public-xiangqing/achievement-display',
				});
			},
			navigateToDetail(imageId) {
			    const pages = getCurrentPages();
			    const currentPage = pages[pages.length - 1];
			    const currentPath = currentPage.route;
			    uni.navigateTo({
			        url: `/pages-public-welfare/pages-public-xiangqing/pages-public-xiangqing?imageId=${imageId}&fromPage=${currentPath}`
			    });
			},
			tzdl(){
				wx.redirectTo({
					url: '/pages-guide/guide',
				})
			},
			triggerAnimation() {
			  setTimeout(() => {
			  this.showImage = true;
			  this.showImage2 = true;
			}, 500);
						    }
		},
        onLoad() {
            setTimeout(() => {
                this.showImage = true;
				this.showImage2 = true;
            }, 500);
        },
        computed: {
            imageClass() {
                return this.showImage? 'slide-in-left' : '';
            },
			 imageClass2() {
			    return this.showImage2? 'slide-in-right' : '';
			},
			
        }
    };
</script>

<style scoped>
	.chenguo {
		opacity: 0;
		background-color: red;
		width: 160rpx;
		height: 55rpx;
		position: relative;
		top: -74rpx;
		left: 78rpx;
	}
	
   .slide-in-left {
        animation: slideInLeft 2s ease forwards;
    }

    @keyframes slideInLeft {
        from {
            transform: translateX(-100%);
			opacity: 1;  /* 入场结束时显示 */
			
        }
        to {
            transform: translateX(0);
			opacity: 1;  /* 入场结束时显示 */
        }
    }
	.slide-in-right {
	    animation: slideInRight 2s ease forwards;
	}
	
	@keyframes slideInRight {
	    from {
	        transform: translateX(100%);
	        opacity: 1;
	    }
	    to {
	        transform: translateX(0);
	        opacity: 1;
	    }
	}
	.image-item{
		opacity: 0;  /* 初始时图片不显示 */
		width: 100%;
		height: 100%;
	}
	.hover-image-style {
	    cursor: pointer; /* 将光标设置为手型 */
	  }
	.container {
	  position: relative;
	  width: 100vw;
	  height: 100vh;
	  display: flex;
	  flex-direction: column;
	  background-color: #E4EBE9 ;
	}
	.beijing{
		z-index: 1;
		height: 100%;
		width: 100%;
	}
	.logo-container{
		z-index: 2;
		position: absolute;
		height: 80vh;
		width: 100%;
		margin-top: 92rpx;
		display: flex;
		flex-direction: column;
	}
	.vertical-container {
	  display: flex;
	  flex-direction: column;
	  width: 25vw;
	  height: 48rpx;
	  margin-top: 13%;
	  margin-left: 4%;
	}
	.vertical-item{
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #3F5649;
		line-height: 38rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.image-container{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.image-item-1{
		width: 89vw;
		height: 15vh;
		align-self: flex-start;
		margin-top: 80rpx;
	}
	.image-item-2{
		width: 84vw;
		height: 14vh;
		align-self: flex-end;
	}
	.image-item-3{
		width: 84vw;
		height: 14vh;
		align-self: flex-start;
		margin-top: 34rpx;
	}
	.image-item-4{
		width: 84vw;
		height: 14vh;
		align-self: flex-end;
		margin-top: 20rpx;
	}
	.dibucontainer{
		position: absolute;
		z-index: 2.;
		width: 100%;
		height: 20vh;
		top: 92%;
	}
	.daohang{
		width: 160.31rpx;
		height: 159.51rpx;
		margin-top: 4.2vh;
			/* border: 2px solid pink;//小圆图 */
			z-index: 2;
		margin-left: 76.8vw;
	}
	.jianto{
		margin-left: 47%;
		margin-bottom: 120rpx;
	}
	@keyframes arrowFade {
	  0% {
	    opacity: 1;
	  }
	  50% {
	    opacity: 0;
	  }
	  100% {
	    opacity: 1;
	  }
	}
	.arrow-fade {
	  animation: arrowFade 1.5s infinite;
	}
</style>